<template>
  <div class="search">
    <a-drawer :visible="modalVisible" :title="modalTitle" width="50%" @close="handleClose">
      <product-form ref="form1" v-if="modalVisible"></product-form>
      <div class="drawer-footer">
        <a-button type="default" @click="pre" v-if="stepIndex>0">上一步</a-button>
        <a-button type="default" @click="next" v-if="stepIndex<2" style="margin-left: 5px">下一步</a-button>
        <a-button type="primary" @click="handleSubmit" style="margin-left: 5px" :loading="saving" v-if="stepIndex==2">提交</a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>

  import ProductForm from './product_form'

  export default {
    name: 'productDrawer',
    props: {},
    data() {
      return {
        saving: false,
        modalVisible: false,
        isEdit: false,
        title: '',
        current: 'form1',
        stepIndex: 0,
        roleName: '',
        formData: {},
        forms: [
          'form1'
        ]
      }
    },
    methods: {
      handleShow(data) {
        this.isEdit = false
        this.stepIndex=0;
        if (data && data.productId) {
          this.isEdit = true
          this.formData = data
        } else {
          this.formData = {}
        }
        this.formData.enableProductParams=data.enableProductParams
        this.modalVisible = true;
        this.handleTabClick('form1')
      },
      handleClose() {
        this.modalVisible = false
      },
      handleSubmit() {
        this.$refs[this.current].handleSubmit()
      },
      handleTabClick(name) {
        this.current = name
        if (this.current === this.forms[0]) {
          this.title = this.isEdit ? '编辑商品' : '添加商品'
        }
        this.$nextTick(() => {
          this.$refs[this.current].setData(this.formData)
        })
      },
      pre() {
        this.stepIndex =this.$refs[this.current].pre(this.stepIndex)
      },
      next() {
        this.stepIndex = this.$refs[this.current].next(this.stepIndex)
      }
    },
    computed: {
      modalTitle: function() {
        return this.title
      }
    },
    created() {
      //监听modal关闭事件
      this.$bus.on('closeModal', (name) => {
        this.modalVisible = false
      })
    },
    components: { ProductForm }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
